<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <html>

  <head>
    <title>Socket.IO chat</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font: 13px Helvetica, Arial;
      }

      form {
        background: #000;
        padding: 3px;
        position: fixed;
        bottom: 0;
        width: 80%;

      }

      form input {
        border: 0;
        padding: 10px;
        width: 90%;
        margin-right: 0.5%;
      }

      form button {
        width: 9%;
        background: rgb(130, 224, 255);
        border: none;
        padding: 10px;
      }

      .messages {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .messages .title {
        text-align: center;
      }

      .messages li {
        padding: 5px 10px;
      }

      .messages li:nth-child(odd) {
        background: #eee;
      }

      #conBox {
        margin: 20px auto;
        width: 300px;

      }

      #room {
        width: 20%;
        float: left;
        margin-top: 50px;
      }

      #messagesBox {
        width: 80%;
        float: right;
      }

      .messages {
        display: none;
      }

      .messages li .name {
        border-radius: 50%;
        border: 1px solid #000;
        height: 25px;
        min-width: 25px;
        text-align: center;
        display: inline-block;
        margin: 0 20px;
      }

      #room li {
        height: 50px;
        line-height: 50px;
        width: 100%;
        text-align: center;
        cursor: pointer;
      }

      #room li.active {
        background: #82e0ff45
      }

      #content {
        display: none;
        width: 100%;

      }

      #name {
        float: right;
        top: 0;
        width: 50px;
        height: 50px;
      }

      #master {
        display: none;
      }
    </style>
  </head>

  <body>
    <div id="conBox">
      昵称
      <input type="text" name="" id="nickName">
      <button id='conBtn'>开始</button>
    </div>

    <div id="name">

    </div>

    <div id="content">

      <ul id="room">
        <li>房间1</li>
        <li>房间2</li>
        <li>房间3</li>
      </ul>

      <div id="messagesBox">

        <ul class="messages">
          <li class="title"></li>
          <li id="master">
            <span class="name"></span>
            <span class="message"></span>
          </li>
        </ul>

        <ul class="messages">
          <li class="title"></li>
        </ul>

        <ul class="messages">
          <li class="title"></li>
        </ul>
        <form action="">
          <input id="m" autocomplete="off" />
          <button>Send</button>
        </form>
      </div>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script type="module">
      // const io = require("socket.io-client"); 浏览器不识别require
      //import { io } from './node_modules/socket.io/dist/client.js';

      $(function () {
        var indexG = null;
        var socket;
        var name = '';
        $('#room li').click(function (e) {

          var index = $(this).index();
          if (index == indexG) { return; }
          indexG = index;
          $('#room li').removeClass('active')
          $(this).addClass('active')
          $('.messages').css('display', 'none').eq(index).css('display', 'block').find('.title').text($(this).text())
        })

        $('#conBtn').click(function () {
          // socket = io('/admin');
          name = $('#nickName').val()
          $('#name').text(name)
          $('#conBox').css('display', 'none')
          $('#content').css('display', 'block')


          socket = io('http://localhost:3000/', {
            query: {
              name: name,

            }
          })

          socket.on('hi', function (msg) {
            console.log(msg)
            $('.messages').append($('<li>').text(msg));
          })



          $('#room li').each((index, ele) => {

            socket.on($(ele).text(), function (msg) {
              console.log(msg)
              var me = $('#master').clone();
              me.css('display', 'block')
                .find('.name').text(msg.name).next()
                .text(msg.message)
              $('.messages').eq(index).append(me)

            })

          });



        });


        $('form').submit(function (e) {
          e.preventDefault(); // prevents page reloading

          socket.emit($('#room li.active').text(), {
            name: name,
            message: $('#m').val()
          }); //触发事件访问服务端
          $('#m').val('');
          return false;
        });






      });
    </script>
  </body>




  </html>